<template>
	<CFormDrawer
		ref="cFormDrawerRef"
		:title="title"
		:size="size"
		:itemList="itemList"
		:labelWidth="labelWidth"
		:labelSuffix="labelSuffix"
		:apiSubmit="onSubmit"
		@submit-success="onSubmitSuccess"
	>
		<!-- 递归传递插槽！！！ -->
		<template v-for="slotName in Object.keys($slots)" #[slotName]="scope">
			<slot :name="slotName" v-bind="scope" />
		</template>
	</CFormDrawer>
</template>
<!-- 添加、修改 -->
<script setup lang="ts" name="CAddEditDrawer">
import { ref, computed } from 'vue'
import { FormItemProps } from '@/components/CForm/interface'
import CFormDrawer from '@/components/CForm/CFormDrawer.vue'
const emits = defineEmits(['addSuccess', 'editSuccess'])
type Mode = 'add' | 'edit'
const modeType = ref<Mode>('add')
interface DrawerProps {
	size?: string | number // Drawer 窗体的大小
	/* 表单需要的字段 */
	itemList: FormItemProps[] // 配置项目列表
	labelWidth?: string // label 宽度
	labelSuffix?: string // 表单域标签的后缀
	apiAdd?: (...params: any[]) => Promise<any> // 添加接口
	apiEdit?: (...params: any[]) => Promise<any> // 编辑接口
}
// 默认值
const props = withDefaults(defineProps<DrawerProps>(), {
	labelWidth: '120px',
	size: '500px'
})
// 标题
const titleTemp = ref<string>()
const title = computed(() => {
	if (titleTemp.value) {
		return titleTemp.value
	}
	const mode = modeType.value

	if (mode === 'add') {
		return '新增'
	} else if (mode === 'edit') {
		return '编辑'
	} else {
		return ''
	}
})

const cFormDrawerRef = ref<InstanceType<typeof CFormDrawer>>()
// 获取 CFormDrawer 组件
function getCFormDrawerRef() {
	return cFormDrawerRef.value
}

// 提交成功事件
function onSubmitSuccess(res: any) {
	if (modeType.value === 'add') {
		emits('addSuccess', res)
	} else if (modeType.value === 'edit') {
		emits('editSuccess', res)
	}
}

// 提交（新增/编辑）
function onSubmit(formData: Record<string, any>) {
	if (modeType.value === 'add') {
		return props.apiAdd!(formData)
	} else if (modeType.value === 'edit') {
		return props.apiEdit!(formData)
	}
	throw new Error(`参数错误，mode不能为 ${modeType.value}`)
}

/**
 * 新增
 * @param title 标题
 */
function openAdd(title?: string): void {
	modeType.value = 'add'
	titleTemp.value = title
	if (!props.apiAdd) {
		throw new Error(`参数错误，新增逻辑apiAdd不能为空`)
	}

	getCFormDrawerRef()?.open()
}
/**
 * 修改，并根据参数初始化编辑表单
 * @param data apiInit的参数，如果没有apiInit就是直接给表单赋值的数据
 * @param title 标题
 */
function openEditDataInit(data: Record<string, any>, title?: string): void {
	modeType.value = 'edit'
	titleTemp.value = title
	/* 校验 */
	if (!props.apiEdit) {
		throw new Error(`参数错误，编辑模式下apiEdit不能为空`)
	}

	getCFormDrawerRef()?.openDataInit(data)
}
/**
 * 修改，并提供 apiInit接口
 * @param apiInit apiInit 接口
 * @param title 标题
 */
function openEditApiInit(apiInit: Promise<Record<string, any>>, title?: string): void {
	modeType.value = 'edit'
	titleTemp.value = title
	/* 校验 */
	if (!props.apiEdit) {
		throw new Error(`参数错误，编辑模式下apiEdit不能为空`)
	}

	getCFormDrawerRef()?.openApiInit(apiInit)
}
defineExpose({ openAdd, openEditDataInit, openEditApiInit })
</script>
